<template>
  <scroll-view scroll-x class="segmented-scroll-container" :show-scrollbar="false">
    <wd-segmented :options="options" :value="modelValue" customClass="tabs" @click="handleChange">
      <template #label="{ option }">
        <text>
          {{ option[labelKey] }}
        </text>
      </template>
    </wd-segmented>
  </scroll-view>
</template>
<script setup>
defineOptions({
  options: {
    styleIsolation: 'shared',
  }
});

const emit = defineEmits(['update:modelValue']);

const props = defineProps({
  valueKey: {
    type: String,
    default: "value"
  },
  labelKey: {
    type: String,
    default: "label"
  },
  options: {
    type: Array,
    required: true
  },
  modelValue: {
    type: [Number, String],
    required: true
  }
})

function handleChange(item) {
  if (props.options.length) {
    emit('update:modelValue', item[props.valueKey]);
  }
}

</script>

<style lang="scss" scoped>
.segmented-scroll-container {
  width: 100%;
  white-space: nowrap;
}

:deep(.tabs) {
  display: inline-flex;
  min-width: 100%;
}

:deep(.wd-segmented__item) {
  flex: none;
  min-width: 140rpx;
  color: #9a9a9a;
}
</style>
